<template>
  <div>
    <div v-for="(item, index) in ruleForm" class="specificine">
      <div>
        <flexbox>
          <el-form :model="item" :rules="rules" ref="productForm" label-width="100px" class="demo-ruleForm proSize">
            <el-form-item label="产品编号" prop="num" label-width="75px">
              <el-input v-model="item.num" @input="numberEmpty(item)"></el-input>
            </el-form-item>
            <el-form-item label="规格" prop="specName" label-width="67px">
              <el-input v-model="item.specName" @input="numberEmpty(item)"></el-input>
            </el-form-item>
            <el-form-item label="开启库存预警" prop="delivery">
              <el-switch v-model="storehouseVel.length === 0 ? item.delivery = false : item.delivery" :disabled="!item.num || !item.specName || storehouseVel.length < 1" title="要添加仓库,产品编号和规格才能开启预警" @change="deliveryStatus($event, item)"></el-switch>
            </el-form-item>
<!--            <div class="sizeAddBox">-->
<!--              <span v-if="index >= 1" class="sizeAdd sizeSplice" @click="spliceSpeci(index)">-</span>-->
<!--              <span v-else class="sizeAdd" @click="moreSpeci">+</span>-->
<!--            </div>-->
          </el-form>
        </flexbox>
      </div>
      <div v-if="item.delivery" class="openStockList">
        <flexbox v-for="(items, index) in item.storehouse" :key="index">
          <el-form :model="items" :rules="rules" ref="moreStockForm" label-width="100px" class="demo-ruleForm proSize">
            <div style="height: 40px;line-height: 40px;width: 100px;">{{ items.storehouseName }}:</div>
            <el-form-item label="最低库存" prop="minnumWarn" label-width="75px">
              <el-input v-model="items.minnumWarn" type="number" :min="0" @input="morethanMin(items, index)"></el-input>
            </el-form-item>
            <el-form-item label="最高库存" label-width="80px">
              <el-input v-model="items.maxnumWarn" onmousewheel="return false" type="number" :min="0" @input="morethanMin(items, index)"></el-input>
            </el-form-item>
          </el-form>
        </flexbox>
      </div>
    </div>
  </div>
</template>
<script>
import { psiProductStockpileList } from '@/api/psimanagement/common'
export default {
  name: 'PsiSpecificine',
  props: {
    storehouseVel: {
      type: Array,
      default: []
    },
    action: {
      type: Object, default: () => {
        return {
          type: 'ave',
          id: '',
          data:{} // 编辑所需信息
        }
      }
    }
  },
  data() {
    return {
      ruleForm: [],
      rules: {
        num: [
          { required: true, message: '请输入产品编号', trigger: 'blur' }
        ],
        specName: [
          { required: true, message: '请输入规格', trigger: 'blur' }
        ],
        minnumWarn: [
          { required: true, message: '请输入最低库存', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    storehouseVel(val) {
      for (var i = 0; i < this.ruleForm.length; i++) {
        this.ruleForm[i].storehouse = val
      }
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const reqeust = psiProductStockpileList
      const params = {}
      params.productId = this.action.id
      reqeust(params)
        .then(res => {
          if (res.data != '') {
            for (var i = 0; i < res.data.length; i++) {
              if (res.data[i].storehouse.length > 0) {
                res.data[i]['delivery'] = true
                this.$emit('getSpecValue', res.data[i].storehouse)
              } else {
                res.data[i]['delivery'] = false
              }
            }
            this.ruleForm = res.data
          } else {
            this.ruleForm.push({
              num: '', // 产品编号
              specName: '', // 规格
              delivery: false, // 是否开启库存预警
              storehouse: this.storehouseVel
            })
          }
        })
        .catch(() => {})
    },
    validateField(result) {
      var resultBlack = []
      var trueNum = 0
      this.$refs.productForm.forEach((item, index) => {
        if (this.ruleForm[index].delivery) {
          this.$refs.moreStockForm[index].validate(valid => {
            if (valid) {
              // result()
              resultBlack.push(true)
            } else {
              resultBlack.push(false)
              return false
            }
          })
        }
        this.$refs.productForm[index].validate(valid => {
          if (valid) {
            // result() // 成功回调
            resultBlack.push(true)
          } else {
            resultBlack.push(false)
            return false
          }
        })
      })
      resultBlack.forEach((el, idx) => {
        if (el) {
          trueNum = trueNum + 1
        }
      })
      if (trueNum === resultBlack.length) {
        result()
      }
    },
    resetForm(formName) { // 重置表单
      this.$refs[formName].resetFields()
    },
    moreSpeci() {
      this.ruleForm.push({
        num: '', // 产品编号
        specName: '', // 规格
        delivery: false, // 是否开启库存预警
        storehouse: this.storehouseVel
      })
    },
    // 减少多规格
    spliceSpeci(index) {
      this.ruleForm.splice(index, 1)
    },
    // 产品编号和规格为空的时候自动关闭仓库的预警
    numberEmpty(item) {
      if (item.num === '' || item.specName === '') {
        item.delivery = false
      }
    },
    deliveryStatus(vel, item) {
      if (this.storehouseVel != '') {
        item.storehouse = this.storehouseVel
      }
    },
    // 最高库存必须大于最低库存
    morethanMin(item, index) {
      var maxnumWarn = Number(item.maxnumWarn)
      var minnumWarn = Number(item.minnumWarn)
      if (maxnumWarn != '' || maxnumWarn != 0) {
        if (maxnumWarn < minnumWarn) {
          this.$message.error('最高库存不能小于最低库存')
          item.maxnumWarn = 0
        }
      }
    }
  }
}
</script>
<style scoped>
.proSize{
  display: inline-flex;
}
.sizeAdd{
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  background-color: #3c8be3;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: 5px;
  color: #ffffff;
}
.sizeAddBox{
  margin-left: 10px;
}
.sizeSplice{
   background-color: #f3a633;
 }
.openStockList{
  margin-left: 20px;
  color: #999999;
}
</style>
